<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/boot.js"></script>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
    <table style="width:100%;">
        <tr>
            <td>
            	选择时间段：
        		<input id="start_time" class="mini-monthpicker" format="yyyy-MM" tooltip="请选择开始时间" showClose="true" oncloseclick="clearT" allowInput="false" style="width:100px;"/>
        		&nbsp;—
        		<input id="end_time" class="mini-monthpicker" format="yyyy-MM" tooltip="请选择截止日期" showClose="true" oncloseclick="clearT" allowInput="false" style="width:100px;"/>
				<a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>
            </td>
        </tr>
    </table>           
</div>

<div class="mini-fit" >
<div id="container1" style="min-width: 310px; height: 100%;width: 100%;"></div>
</div>

<script type="text/javascript">

mini.parse();
var startTime = mini.get("start_time");
var endTime = mini.get("end_time");
var myDate = new Date();
var sm = myDate.getFullYear() + '-'+myDate.getMonth()+'';
var em = myDate.getFullYear() + '-'+ (myDate.getMonth()+1) +'';
startTime.setValue(sm);
endTime.setValue(em);

var options = {
	chart: {
        type: 'column'
    },
    title: {
        text: '会员购买力年龄段分布图'
    },
    xAxis: {
        categories: ['20岁~30岁','31岁~40岁','41岁~50岁','51岁~60岁','60岁以上']
    },
    yAxis: {
        min: 0,
        allowDecimals: false,
        title: {
            text: '人数'
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series:[
    {
        name: '年龄段人数',
    }],
    credits:{
    	text:"",
        href:"javascript:void(0);"
    }
};

function search() {
	view();
}

function view() {
	var chart = $('#container1').highcharts(options);
	data = [];
	$.post("amount_age_view.do", {startTime: startTime.getFormValue(), endTime: endTime.getFormValue()}, function(info){
		data = $.parseJSON('[' + info + ']');
		chart = new Highcharts.Chart(options);
		chart.series[0].setData(data);
	}, "json");
}

function onKeyEnter(e) {
    search();
}

function clearT(e){
	e.sender.setValue("");	
	e.sender.setText("");	
}

$(document).ready(function(){
	view();
});
</script>
</body>
</html>